<template>
	<view class="content">
		<view class="head padding flex ">
			<image
				:src="smmUser.avatar_url"
				mode=""
				class="bg-gradual-green round"
				style="width:120rpx ; height: 120rpx;"
				@click="preview(smmUser.avatar_url)"
			></image>
			<view class="flex flex-direction justify-center margin-left " style="height: 120rpx;">
				<text class="text-bold text-xl ">{{ smmUser.nick_name || '未登录' }}</text>
				<button class="cu-btn round sm line-red" @click="updataGetUser">{{ '更新昵称' }}</button>
				<view class="" @click="copy(smmUser.id)">
					<text class="margin-top-xs">{{ smmUser.id != null ? 'ID :' + smmUser.id : '' }}</text>
					<text class="cuIcon-copy margin-left"></text>
				</view>
			</view>
		</view>
		<view class="info shadow radius    ">
			<block v-for="(item, index) in data" :key="index">
				<view class="flex flex-direction align-center justify-center xxx" style="width: 25%;" @click="jump(item.jump)" v-if="item.show == 2">
					<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
					<text class="text-sm margin-top-xs">{{ item.name }}</text>
				</view>
				<view
					class="flex flex-direction align-center justify-center xxx"
					style="width: 25%;"
					@click="jump(item.jump)"
					v-if="identity.isMerchant && identity.merchantInfo.approvalStatus == 1 && item.show == 1"
				>
					<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
					<text class="text-sm margin-top-xs">{{ item.name }}</text>
				</view>
				<view
					class="flex flex-direction align-center justify-center xxx"
					style="width: 25%;"
					@click="jump(item.jump)"
					v-if="identity.isEmployee && item.show == 3"
				>
					<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
					<text class="text-sm margin-top-xs">{{ item.name }}</text>
				</view>
				<view
					class="flex flex-direction align-center justify-center xxx"
					style="width: 25%;"
					@click="jump(item.jump)"
					v-if="identity.isMerchant && identity.merchantInfo.approvalStatus == 1 && item.show == 3"
				>
					<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
					<text class="text-sm margin-top-xs">{{ item.name }}</text>
				</view>
				<!-- <block v-if="identity.isMerchant && item.show == 1">
						<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
						<text class="text-sm margin-top-xs">{{ item.name }}</text>
					</block>
					<block v-if="identity.isEmployee && item.show == 3">
						<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
						<text class="text-sm margin-top-xs">{{ item.name }}</text>
					</block>
					<block v-if="identity.isMerchant && item.show == 3">
						<image :src="item.icon" mode="aspectFill" style="width: 70rpx; height: 70rpx;"></image>
						<text class="text-sm margin-top-xs">{{ item.name }}</text>
					</block> -->
			</block>
		</view>
		<u-sticky>
			<text class="text-df padding block" style="background-color: #F1F1F1;">
				<text class="cuIcon-title margin-right-xs"></text>
				可能感兴趣店铺
			</text>
		</u-sticky>

		<!-- 店铺列表 -->
		<view class="maket">
			<view class="maketList" v-for="(item, index) in businessInfo" @click="intoDetail(item.id)" :key="index">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="ma_detail">
					<view class="ma_name">
						<view class="tt">{{ item.name }}</view>
						<view class="juli" v-if="0">
							距您{{ item.distance > 1000 ? Math.round(item.distance / 1000) + 'km' : item.distance + 'm' }}
						</view>
					</view>
					<view class="ma_addr">{{ item.address }}</view>
					<view class="ma_youhui">
						<image src="../../static/qietu/youhuiquan.png" mode="aspectFill"></image>
						拥有店铺
						<text style="color: #f9621c;" class="margin-lr-xs">{{ item.coupons.length || '0' }}张</text>
						优惠券
					</view>
					<view class="ma_yhList">
						<view class="ma_yhdetail" v-for="(item1, index1) in item.products" :key="index1">
							<image :src="item1.image" mode="widthFix"></image>
							<view>{{ item1.denomination }}</view>
							<view style="color: #f9621c;">￥{{ item1.price }}元</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		<u-popup v-model="showBuy" mode="bottom" border-radius="14">
			<view class="prop">
				<view class="prop-head flex align-center ">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/323232.png" mode="aspectFill" class="radius "></image>
					<text class="text-bold text-lg margin-left">购买积分</text>
				</view>
				<text class="text-lg margin-tb block">数量</text>
				<view class="prop-list">
					<view
						v-for="(item, index) in 4"
						:key="index"
						@click="sel(index)"
						:class="[index == current ? 'prop-list-item-red' : '']"
						class="prop-list-item "
					>
						{{ (index + 1) * 500 }}积分
					</view>
				</view>
				<view class="prop-ipt padding-lr flex align-center justify-center">
					<input type="text" disabled v-model="buyScore" placeholder="输入积分数量" />
				</view>
				<button class="cu-btn prop-btn " @click="buyNow">立即购买</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			smmUser: {},

			showBuy: false,
			buyScore: 60,
			current: 0,
			businessInfo: [],
			userInfo: {
				id: '',
			},
			identity: {},
			data: [
				{
					name: '优惠券',
					icon: '../../static/personal/63.png',
					jump: '/pages/user-center/coupon',
					show: 2,
				},
				{
					name: '积分余额',
					icon: '../../static/personal/62.png',
					jump: '/pages/user-center/pointsBal',
					show: 2,
				},
				{
					name: '缴费记录',
					icon: '../../static/personal/64.png',
					// jump: '/pages/user-center/pay',//paymentRec
					jump: '/pages/user-center/paymentRec', //paymentRec
					show: 2,
				},
				{
					name: '店家入驻',
					icon: '../../static/personal/61.png',
					jump: '/pages/user-center/merchSettled',
					show: 2,
				},
				{
					name: '添加员工',
					icon: '../../static/personal/65.png',
					jump: '/pages/user-center/addEe',
					show: 1,
				},
				{
					name: '购买积分',
					icon: '../../static/personal/66.png',
					jump: 'buyPoints',
					show: 1,
				},
				{
					name: '赠送积分',
					icon: '../../static/personal/67.png',
					jump: '/pages/user-center/gftPoints',
					show: 2,
					// 1  // 1 商家  2 员工
				},
				{
					name: '店铺管理',
					icon: '../../static/personal/68.png',
					jump: '/pages/user-center/storeManagement',
					show: 1,
				},
			],
		};
	},
	computed: {
		name() {
			return this.data;
		},
	},
	onShow() {
		
		var that = this;
		
        
        
        

		app.globalData.api.getUser().then(res => {
		
            app.globalData.smmUser = res.resultObj.user;
            app.globalData.info = res.resultObj.identity;
			this.identity = res.resultObj.identity;
			this.smmUser = res.resultObj.user;
			if (res.resultObj.identity.isMerchant) {
				this.data[3].jump = '/pages/user-center/underRvw';
			}
		});

		//获取商家列表数据
		app.globalData.api.getRandBusiness().then(res => {
			that.businessInfo = res.resultObj;
		});
		// var that = this
		// app.globalData.api.getBusinessDetails(options.id).then(res=>{
		// 	that.businessInfo = res.resultObj
		// });
	},
	methods: {
		async copy(e) {
			uni.setClipboardData({
				data: e + '',
				success: function() {},
			});
		},
		async preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		async buyNow() {
			var that = this;
			app.globalData.api.wxPay(this.buyScore).then(res => {
				wx.requestPayment({
					timeStamp: res.resultObj.wxPayRequest.timeStamp,
					nonceStr: res.resultObj.wxPayRequest.nonceStr,
					package: res.resultObj.wxPayRequest.packageValue,
					signType: 'MD5',
					paySign: res.resultObj.wxPayRequest.paySign,
					success(res1) {
						console.log('res1 :>> ', res1);
						that.$refs.uToast.show({ title: '购买' + that.buyScore + '成功~~', type: 'success' });
					},
					fail(res2) {
						console.log('failed', res2);
					},
				});
			});
		},
		// 更新昵称
		updataGetUser() {
			var that = this;
			uni.getUserProfile({
				desc: '更新信息',
				success: res => {
					that.setData({
						userInfo: res.userInfo,
						['userInfo.id']: app.globalData.smmUser.id,
					});
					app.globalData.api.updateUserInfo(that.userInfo).then(res1 => {
						if (res1.resultObj > 0) {
							// app.globalData.api.getUser().then(res => {
							// 	console.log('res: ', res);
							// 	this.identity = res.resultObj.identity;
							// 	this.smmUser = res.resultObj.user;

							// });

							app.globalData.api.getUser().then(res2 => {
								that.smmUser = res2.resultObj.user;
								app.globalData.smmUser = res2.resultObj;
							});
						}
					});
				},
				fail: res => {
					console.log(res);
				},
			});
		},
		// 购买积分
		buy() {
			var that = this;
			var userScore = {
				userId: app.globalData.smmUser.id,
				score: that.buyScore,
				comment: '购买了' + that.buyScore + '积分',
				isGet: 1,
			};
			app.globalData.api.addUserScore(userScore).then(res => {
				if (res.resultObj > 0) {
					this.$refs.uToast.show({ title: '购买积分成功~~', type: 'success' });
					that.showBuy = false;
					app.globalData.api.getUser().then(res4 => {
						app.globalData.smmUser = res4.resultObj.user;
						app.globalData.info = res4.resultObj.identity;
					});
				}
			});
		},
		jump(url) {
			if (url == 'buyPoints') {
				this.showBuy = true;
			} else {
				uni.navigateTo({
					url,
				});
			}
		},

		sel(e) {
			this.current = e;
			switch (e) {
				case 0:
					this.buyScore = 60;
					break;
				case 1:
					this.buyScore = 120;
					break;
				case 2:
					this.buyScore = 180;
					break;
				case 3:
					this.buyScore = 240;
					break;
			}
		},
		// 进入店铺详情
		intoDetail(id) {
			uni.navigateTo({
				url: '../ma_detail/ma_detail?id=' + id,
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.prop {
		padding: 10rpx 60rpx;
		.prop-head {
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
		.prop-ipt {
			width: 630rpx;
			height: 80rpx;
			border: 1rpx solid #e6e6e6;
			border-radius: 10rpx;
			input {
				width: 100%;
				text-align: center;
			}
		}
		.prop-btn {
			width: 630rpx;
			height: 80rpx;
			background: #f8ce39;
			border-radius: 12rpx;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 60rpx 0;
		}

		.prop-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			/deep/.prop-list-item-red {
				border: 1rpx solid red !important;
				color: red !important;
				font-size: 40rpx !important;
			}
			.prop-list-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 120rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 10rpx;

				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 30rpx;
			}
		}
	}
	.head {
		width: 100vw;
		height: 280rpx;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		background-color: #f8ce39;
		color: #333333;
	}
	.info {
		width: 690rpx;
		// height: 360rpx;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: -70rpx;
		padding: 39rpx 55rpx;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		.xxx {
			height: 150rpx;
		}
	}
	.list {
		width: 690rpx;
		height: 410rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		.commodity {
		}
	}
}
// 店铺列表
.maket {
	width: 705rpx;
	margin: 0 auto 70rpx;

	.maketList {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20rpx;
		padding: 25rpx;
		border-radius: 20rpx;
		background-color: #ffffff;

		image {
			width: 130rpx;
			height: 130rpx;
		}
		.ma_detail {
			width: 480rpx;
			margin-left: 20rpx;
			line-height: 54rpx;
		}
		.ma_name {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			.tt {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.juli {
				padding: 0 5rpx;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 22upx;
				border-radius: 6rpx;
				background: linear-gradient(to right, #ffe68a, #f8d041);
			}
		}
		.ma_addr {
			font-size: 27upx;
			color: #6f6f6f;
		}
		.ma_youhui {
			font-size: 27upx;
			color: $uni-text-color-grey;
			display: flex;
			align-items: center;

			image {
				width: 35rpx;
				height: 26rpx;
				margin-right: 15rpx;
			}
		}
		.ma_yhList {
			display: flex;
			overflow: hidden;
			margin: 10rpx 0;
			line-height: 35rpx;

			.ma_yhdetail {
				width: 155rpx;
				margin-right: 10rpx;
			}

			image {
				background-color: #00bfff;
				width: 155rpx;
				height: 105rpx;
			}
		}
	}
}
</style>
